<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->

<template>
  <div class="flex h-screen">
    <div
      class="w-[200px] bg-gradient-to-b from-[#001529] to-[#002140] shadow-lg"
    >
      <div
        class="h-16 flex items-center justify-center border-b border-white/10"
      >
        <img
          :src="require('../../public/log.jpg')"
          alt="logo"
          class="w-8 h-8 mr-2"
        />
        <span class="text-white font-bold text-base">算法分析平台</span>
      </div>

      <div class="mt-4 px-2">
        <div
          v-for="(item, index) in menuItems"
          :key="index"
          @click="handleMenuClick(item)"
          :class="[
            'flex items-center px-4 py-3 mb-2 rounded-lg cursor-pointer transition-all duration-300',
            selectedMenu === item.key
              ? 'bg-blue-500 text-white'
              : 'text-gray-300 hover:bg-white/5',
          ]"
        >
          <component :is="item.icon" class="mr-3 text-base" />
          <span class="text-sm whitespace-nowrap">{{ item.label }}</span>
          <i
            v-if="item.children"
            :class="[
              'fas fa-chevron-right ml-auto transition-transform duration-300',
              expandedMenus.includes(item.key) ? 'transform rotate-90' : '',
            ]"
          >
          </i>
        </div>

        <!-- 子菜单 -->
        <div
          v-for="(item, index) in menuItems"
          :key="`sub-${index}`"
          v-show="item.children && expandedMenus.includes(item.key)"
          class="pl-4"
        >
          <div
            v-for="(child, childIndex) in item.children"
            :key="childIndex"
            @click="handleSubMenuClick(child)"
            :class="[
              'flex items-center px-4 py-2 mb-1 rounded-lg cursor-pointer transition-all duration-300 text-sm',
              selectedMenu === child.key
                ? 'bg-blue-500/80 text-white'
                : 'text-gray-300 hover:bg-white/5',
            ]"
          >
            <div class="w-1 h-1 bg-gray-400 rounded-full mr-2"></div>
            {{ child.label }}
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="flex-1 bg-gray-100 overflow-auto">
      <div class="h-16 bg-white shadow-sm px-6 flex items-center">
        <h2 class="text-xl font-medium text-gray-800">
          {{ currentPageTitle }}
        </h2>
        <div class="ml-auto flex items-center space-x-4">
          <a-badge :count="5" @click="toMessageView">
            <bell-outlined class="text-xl text-gray-600 cursor-pointer" />
          </a-badge>
          <a-dropdown
            v-if="store.state.user.loginUser.userName !== '未登录'"
            style="margin-right: 10px"
          >
            <a-avatar
              :image-url="store.state.user?.loginUser?.userAvatar"
              alt="用户头像"
              style="margin-right: 10px"
            />
            <div style="margin-right: 20px">
              {{ store.state.user?.loginUser?.userName ?? "未登录" }}
            </div>
            <template #content>
              <a-doption @click="clickTo('person')">个人中心</a-doption>
              <a-doption @click="clickTo('logOut')">退出登录</a-doption>
            </template>
          </a-dropdown>
        </div>
      </div>

      <div class="p-6">
        <div>
          <!-- 页面内容占位 -->
          <div>
            <router-view />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import {
  HomeOutlined,
  ApiOutlined,
  UserOutlined,
  FileTextOutlined,
  TagsOutlined,
  MessageOutlined,
  BellOutlined,
} from "@ant-design/icons-vue";
import { Badge, Avatar } from "ant-design-vue";
import { useRouter } from "vue-router";
import { UserControllerService } from "../../xiongoj_backendapi";
import { useStore } from "vuex";
const selectedMenu = ref("home");
const currentPageTitle = ref("首页");
const expandedMenus = ref<string[]>([]);
//管理员菜单目录
const menuItems = ref([
  {
    key: "home",
    label: "首页",
    icon: HomeOutlined,
    path: "/admin/index",
  },
  {
    key: "api",
    label: "Api用量查询",
    icon: ApiOutlined,
    path: "/admin/AdminApiSearch",
  },
  {
    key: "users",
    label: "用户管理",
    icon: UserOutlined,
    path: "/admin/userManage",
  },
  {
    key: "tags",
    label: "标签管理",
    icon: TagsOutlined,
    // 这里假设没有对应的路由，可根据实际情况修改
    path: "/admin/tagsManage",
  },
  {
    key: "messages",
    label: "消息管理",
    icon: MessageOutlined,
    path: "/admin/messageManage",
  },
  {
    key: "questions",
    label: "题目管理",
    icon: FileTextOutlined,
    children: [
      {
        key: "add-question",
        label: "录入题目",
        path: "/admin/addQuestion",
      },
      {
        key: "manage-question",
        label: "管理题目",
        path: "/admin/question",
      },
    ],
  },
]);

const handleMenuClick = (item: any) => {
  if (item.children) {
    const index = expandedMenus.value.indexOf(item.key);
    if (index === -1) {
      expandedMenus.value.push(item.key);
    } else {
      expandedMenus.value.splice(index, 1);
    }
  } else {
    selectedMenu.value = item.key;
    currentPageTitle.value = item.label;
    if (item.path) {
      router.push(item.path);
    }
  }
};
//点击菜单的方法
const handleSubMenuClick = (item: any) => {
  selectedMenu.value = item.key;
  currentPageTitle.value = item.label;
  if (item.path) {
    router.push(item.path);
  }
};
//点击头像跳转
const router = useRouter();
const store = useStore();
const clickTo = (pageName: string) => {
  // 根据页面名称执行导航逻辑
  if (pageName === "person") {
    router.push("/person");
  } else if (pageName === "logOut") {
    UserControllerService.userLogoutUsingPost();
    location.reload();
  }
  // 可以添加更多的页面调整逻辑
};
//点击消息跳转到消息管理
const toMessageView = () => {
  router.push("/admin/messageManage");
  handleSubMenuClick(menuItems.value[4]);
};
onMounted(() => {
  router.push("/admin/index");
});
</script>

<style scoped>
.bg-gradient-to-b {
  background-size: 100% 100%;
  background-position: 0% 0%;
}

.shadow-lg {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
</style>
